<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="1100px">
			<el-row :gutter="20">
				<el-col :span="11">
					<el-divider content-position="left">待选商品</el-divider>
				</el-col>
				<el-col :span="2" />
				<el-col :span="11">
					<el-divider content-position="left">已选商品</el-divider>
				</el-col>
			</el-row>
			<el-row :gutter="20" class="mb10">
				<el-col :span="11">
					<el-input v-model="state.queryParams1.title" placeholder="请输入商品名称" clearable style="width: 79%" class="mr5" />
					<el-button type="primary" @click="getList1">
						<el-icon>
							<ele-Search />
						</el-icon>
						查 询
					</el-button>
				</el-col>
				<el-col :span="2" />
				<el-col :span="11">
					<el-input v-model="state.queryParams2.title" placeholder="请输入商品名称" clearable style="width: 79%" class="mr5" />
					<el-button type="primary" @click="getList2">
						<el-icon>
							<ele-Search />
						</el-icon>
						查 询
					</el-button>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="11">
					<el-table :data="state.tableList1" v-loading="state.loading1" border @selection-change="onSelectionChange1">
						<el-table-column type="selection" width="40" align="center" />
						<el-table-column label="商品名称" align="center" prop="title" show-overflow-tooltip />
					</el-table>
				</el-col>
				<el-col :span="2" class="f-c-n-c">
					<div class="f-c">
						<el-button type="primary" size="large" class="mb20" :disabled="state.multiple1" @click="onAllocationProduct(true)">
							<el-icon>
								<ele-DArrowRight />
							</el-icon>
						</el-button>
						<el-button type="primary" size="large" style="margin-left: 0" :disabled="state.multiple2" @click="onAllocationProduct(false)">
							<el-icon>
								<ele-DArrowLeft />
							</el-icon>
						</el-button>
					</div>
				</el-col>
				<el-col :span="11">
					<el-table :data="state.tableList2" v-loading="state.loading2" border @selection-change="onSelectionChange2">
						<el-table-column type="selection" width="40" align="center" />
						<el-table-column label="商品名称" align="center" prop="title" show-overflow-tooltip  />
					</el-table>
				</el-col>
			</el-row>
			<template #footer>
				<el-row :gutter="20">
					<el-col :span="11">
						<PaginationComponent
							v-if="state.total1"
							:total="state.total1"
							v-model:page="state.queryParams1.pageNum"
							v-model:limit="state.queryParams1.pageSize"
							:pagerCount="5"
							layout="total, sizes, prev, pager, next"
							@pagination="getList1"
						/>
					</el-col>
					<el-col :span="2" />
					<el-col :span="11">
						<PaginationComponent
							v-if="state.total2"
							:total="state.total2"
							v-model:page="state.queryParams2.pageNum"
							v-model:limit="state.queryParams2.pageSize"
							:pagerCount="5"
							layout="total, sizes, prev, pager, next"
							@pagination="getList2"
						/>
					</el-col>
				</el-row>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { goodsEvaluateApi } from '/@/api';
import { ElMessage } from 'element-plus';

let selectionInfo1: Array<any> = [];
let selectionInfo2: Array<any> = [];
const GoodsEvaluateApi = goodsEvaluateApi();
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	},
	queryParams1: {
		evaluate_id: '',
		title: '',
		pageNum: 1,
		pageSize: 10,
	},
	queryParams2: {
		evaluate_id: '',
		title: '',
		pageNum: 1,
		pageSize: 10,
	},
	tableList1: [],
	tableList2: [],
	loading1: false,
	total1: 0,
	loading2: false,
	total2: 0,
	multiple1: true,
	multiple2: true,
	goodsClassIdSelect1: {
		loading: false,
		options: [] as any,
	},
	goodsClassIdSelect2: {
		loading: false,
		options: [] as any,
	},
});

/********** 触发事件 **********/
// 分配/移除商品
const onAllocationProduct = (type: boolean) => {
	if (type) {
		const goods_ids = selectionInfo1.map((item: any) => item.id).join(',');
		_goodsEvaluateAllocation({
			evaluate_id: state.queryParams1.evaluate_id,
			goods_id: goods_ids,
		});
	} else {
		const goods_ids = selectionInfo2.map((item: any) => item.goods_id).join(',');
		_goodsEvaluateAllocationDelete({
			evaluate_id: state.queryParams2.evaluate_id,
			goods_id: goods_ids,
		});
	}
};
// 左边选择操作项
const onSelectionChange1 = (selection: any) => {
	selectionInfo1 = selection;
	state.multiple1 = !selection.length;
};
// 右边选择操作项
const onSelectionChange2 = (selection: any) => {
	selectionInfo2 = selection;
	state.multiple2 = !selection.length;
};

/********** 方法事件 **********/
// 打开
const openDialog = (row: any) => {
	state.dialog.isShowDialog = true;
	state.dialog.title = `商品评论分配商品`;
	state.queryParams1 = {
		evaluate_id: row.id,
		title: '',
		pageNum: 1,
		pageSize: 10,
	};
	state.queryParams2 = {
		evaluate_id: row.id,
		title: '',
		pageNum: 1,
		pageSize: 10,
	};
	state.tableList1 = [];
	state.tableList2 = [];
	getList1();
	getList2();
};
// 刷新列表
const getList1 = () => {
	state.loading1 = true;
	_goodsEvaluateMiddleNot(state.queryParams1);
};
// 刷新列表
const getList2 = () => {
	state.loading2 = true;
	_goodsEvaluateMiddle(state.queryParams2);
};

/********** 网络请求 **********/
// 待选商品
const _goodsEvaluateMiddleNot = (params: Object) => {
	GoodsEvaluateApi.goodsEvaluateMiddleNot(params)
		.then((res) => {
			state.tableList1 = res.data.list;
			state.total1 = res.data.total;
			state.loading1 = false;
		})
		.catch(() => (state.loading1 = false));
};
// 已选商品
const _goodsEvaluateMiddle = (params: Object) => {
	GoodsEvaluateApi.goodsEvaluateMiddle(params)
		.then((res) => {
			state.tableList2 = res.data.list;
			state.total2 = res.data.total;
			state.loading2 = false;
		})
		.catch(() => (state.loading2 = false));
};
// 分配商品
const _goodsEvaluateAllocation = (params: Object) => {
	GoodsEvaluateApi.goodsEvaluateAllocation(params).then(() => {
		ElMessage.success('操作成功！');
		getList1();
		getList2();
	});
};
// 移除分配商品
const _goodsEvaluateAllocationDelete = (params: Object) => {
	GoodsEvaluateApi.goodsEvaluateAllocationDelete(params).then(() => {
		ElMessage.success('操作成功！');
		getList1();
		getList2();
	});
};

/********** 方法向父组件暴露 **********/
defineExpose({ openDialog });
</script>
